<template>
  <div>
    <!-- <c-table-box index :setting="false" hide-func :data="detailData" :table-span-method="tableSpanMethod" :table-config="tableConfig" /> -->
    <BCTable v-if="dType==='BC'" preview :table-data="detailData" :detail="detail" />
    <DoorTable v-if="dType==='DOOR'" preview :table-data="detailData" :detail="detail" />
    <SGTable v-if="dType==='STORES'" preview :table-data="detailData" :detail="detail" />
  </div>
</template>
<script>
import { getDetailTaskAreaPageTwo } from '@/api/shopDrawing'
import BCTable from '@/views/shopDrawing/detailManagement/edit/components/BCTable'
import DoorTable from '@/views/shopDrawing/detailManagement/edit/components/DoorTable'
import SGTable from '@/views/shopDrawing/detailManagement/edit/components/SGTable'
import { otherFiltersItem } from '@/utils'
export default {
  name: 'AreaSeries',
  components: {
    BCTable,
    DoorTable,
    SGTable
  },
  props: {
    otc: {
      type: String,
      default: ''
    },
    detail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      detailData: [],
      tableConfig: {
        setting: [
          {
            prop: 'areaName',
            label: '所属区域'
          },
          {
            prop: 'spaceName',
            label: '所属空间'
          },
          {
            prop: 'isReportPic',
            label: '是否出图',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'actualOutpicArea',
            label: '出图面积'
          },
          {
            prop: 'outpicDesc',
            label: '出图说明'
          },
          {
            prop: 'styleName',
            label: '所属专区'
          },
          {
            prop: 'styleActualOutpicArea',
            label: '出图面积'
          },
          {
            prop: 'assortCustomizedArea',
            label: '配套定制出图面积'
          },
          {
            prop: 'styleOutDesc',
            label: '出图说明'
          },
          {
            prop: 'seriesName',
            label: '产品系列'
          },
          {
            prop: 'assortCustomizedSeriesName',
            label: '配套定制系列'
          },
          {
            prop: 'assortCupboardSeriesName',
            label: '配套橱柜系列'
          },
          {
            prop: 'isDetailOutpic',
            label: '是否出图',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          }
        ]
      }
    }
  },
  computed: {
    dType() {
      const { designRange, picType } = this.$route.query
      if (picType === 'SG' && designRange === 'DOOR') {
        return 'DOOR'
      } else if (picType === 'SG' && designRange === 'STORES') {
        return 'STORES'
      } else {
        return 'BC'
      }
    }
  },
  watch: {
    otc: {
      handler(v) {
        if (v) {
          this.getDetailData()
        }
      },
      immediate: true
    }
  },
  methods: {
    getDetailData() {
      const data = new FormData()
      data.append('pageFlag', false)
      const filtersRaw = []
      filtersRaw.push(otherFiltersItem('outpicDetailTaskCode', this.otc, '='))
      // filtersRaw.push(otherFiltersItem('enable', '1', '=')) // 加上后端报错
      data.append('filtersRaw', JSON.stringify(filtersRaw))
      if (this.$route.query.designRange === 'DOOR') {
        data.append('paramsRaw', JSON.stringify({ type: 'door' }))
      }
      getDetailTaskAreaPageTwo(data).then(res => {
        const data = res.data.records
        this.detailData = this.handlerData(data)
      })
    },
    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
      const col = [1, 2, 3, 4, 5]
      if (col.includes(columnIndex)) {
        return {
          rowspan: row.spanRow,
          colspan: row.spanColumn
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },
    handlerData(data) {
      const cIds = {}
      for (const d of data) {
        if (!cIds[d.areaCode]) {
          cIds[d.areaCode] = []
        }
        cIds[d.areaCode].push(d)
      }
      const newData = []
      for (const v of Object.values(cIds)) {
        const len = v.length
        for (let i = 0; i < len; i++) {
          const r = v[i]
          if (i === 0) {
            r.spanRow = len
            r.spanColumn = 1
          } else {
            r.spanRow = 0
            r.spanColumn = 1
          }
          newData.push(r)
        }
      }
      return newData
    }
  }
}
</script>
